<div id="gollum-editor" data-escaped-name="{{escaped_name}}" class="{{#is_create_page}}create{{/is_create_page}}{{#is_edit_page}}edit{{/is_edit_page}} {{#allow_uploads}}uploads-allowed{{/allow_uploads}} tex2jax_ignore">
{{#is_create_page}}
<form id="gollum-editor-form" name="gollum-editor" action="{{create_path}}" method="post">
{{/is_create_page}}
{{#is_edit_page}}
<form id="gollum-editor-form" name="gollum-editor" action="{{edit_path}}/{{escaped_name}}" method="post">
{{/is_edit_page}}
  <fieldset id="gollum-editor-fields">
  {{#is_create_page}}
  <div id="gollum-editor-title-field" class="mb-4">
    <label for="page" class="jaws">Page Title</label>
    <input class="form-control mb-2 input-lg input-block text-bold f5" placeholder="Page title" type="text" name="page" id="gollum-editor-page-title" value="{{page_name}}">
    {{#has_path}}
    <p class="path_note"><strong>{{tt.editor.note.title}}</strong> {{tt.editor.note.content}}</p>
    {{/has_path}}
  </div>
  {{/is_create_page}}
  {{#is_edit_page}}
  <input type="hidden" name="page" id="gollum-editor-page-title" value="{{page_name}}">
  <input type="hidden" name="etag" id="gollum-editor-etag" value="{{etag}}">
  {{/is_edit_page}}
  <input type="hidden" name="path" id="gollum-editor-page-path" value="{{path}}">
  
  <div id="gollum-editor-function-bar" class="border-bottom clearfix mb-2">
    <div id="gollum-editor-function-buttons" class="overflow-auto no-wrap">
      <div class="BtnGroup">
        <button class="btn btn-sm BtnGroup-item function-button" id="function-h1" title="{{tt.editor.function_bar.heading1.title}}">{{tt.editor.function_bar.heading1.value}}</button>
        <button class="btn btn-sm BtnGroup-item function-button" id="function-h2" title="{{tt.editor.function_bar.heading2.title}}">{{tt.editor.function_bar.heading2.value}}</button>
        <button class="btn btn-sm BtnGroup-item function-button" id="function-h3" title="{{tt.editor.function_bar.heading3.title}}">{{tt.editor.function_bar.heading3.value}}</button>
      </div>

      <div class="BtnGroup">
        <button class="btn btn-sm BtnGroup-item function-button" id="function-link" title="{{tt.editor.function_bar.link}}">{{#octicon}}link{{/octicon}}</button>
        <button class="btn btn-sm BtnGroup-item function-button" id="function-image" title="{{tt.editor.function_bar.image}}">{{#octicon}}image{{/octicon}}</button>
      </div>

      <div class="BtnGroup">
        <button class="btn btn-sm BtnGroup-item function-button" id="function-bold" title="{{tt.editor.function_bar.bold}}">{{#octicon}}bold{{/octicon}}</button>
        <button class="btn btn-sm BtnGroup-item function-button" id="function-italic" title="{{tt.editor.function_bar.italic}}">{{#octicon}}italic{{/octicon}}</button>
        <button class="btn btn-sm BtnGroup-item function-button" id="function-code" title="{{tt.editor.function_bar.code}}">{{#octicon}}code{{/octicon}}</button>
      </div>

      <div class="BtnGroup">
        <button class="btn btn-sm BtnGroup-item function-button" id="function-ul" title="{{tt.editor.function_bar.unordered_list}}">{{#octicon}}list-unordered{{/octicon}}</button>
        <button class="btn btn-sm BtnGroup-item function-button" id="function-ol" title="{{tt.editor.function_bar.ordered_list}}">{{#octicon}}list-ordered{{/octicon}}</button>
        <button class="btn btn-sm BtnGroup-item function-button" id="function-blockquote" title="{{tt.editor.function_bar.blockquote}}">{{#octicon}}quote{{/octicon}}</button>
        <button class="btn btn-sm BtnGroup-item function-button" id="function-hr" title="{{tt.editor.function_bar.horizontal_rule}}">{{#octicon}}horizontal-rule{{/octicon}}</button>
      </div>

      {{#critic_markup}}
      <div class="BtnGroup">
        <button class="btn btn-sm BtnGroup-item function-button" id="function-critic-accept" title="{{tt.editor.function_bar.accept_selected_criticMarkup}}">{{#octicon}}plus{{/octicon}}</button>
        <button class="btn btn-sm BtnGroup-item function-button" id="function-critic-reject" title="{{tt.editor.function_bar.reject_selected_criticMarkup}}">{{#octicon}}dash{{/octicon}}</button>
      </div>
      {{/critic_markup}}

      <button class="btn btn-sm function-button" id="function-text-direction" title="{{tt.editor.function_bar.reverse_text_direction}}">{{#octicon}}arrow-both{{/octicon}}</button>
      
      <button
        aria-label="{{tt.editor.function_bar.help}}"
        class="btn btn-sm function-button"
        data-help-text="{{help_text}}"
        id="function-help"
        title="{{tt.editor.function_bar.help}}">
        {{#octicon}}question{{/octicon}}
      </button>
      
    </div>

    <div id="gollum-editor-selector-wrapper" class="d-flex flex-wrap float-right">
      <div id="gollum-editor-keybinding-selector" class="mx-2">

        <details class="details-reset details-overlay">
          <summary class="btn btn-sm btn-block" aria-haspopup="true">
            {{#octicon}}gear{{/octicon}}
            <span class="mr-1">{{default_keybinding}}</span>
            <div class="dropdown-caret"></div>
          </summary>
          <div id="keybinding" class="SelectMenu BasicSelect">
            <div class="SelectMenu-modal">
              <header class="SelectMenu-header">
                <h3 class="SelectMenu-title text-left">{{tt.editor.function_bar.keybinding}}</h3>
              </header>
              <div class="SelectMenu-list">
                {{#keybindings}}
                <button class="SelectMenu-item" role="menuitemcheckbox" {{#selected}}aria-checked="true"{{/selected}} value="{{name}}">
                  <!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
                  {{#octicon}}check 16 16 SelectMenu-icon SelectMenu-icon--check{{/octicon}}
                  {{name}}
                </button>
                {{/keybindings}}
              </div>
            </div>
          </div>
        </details>
      </div>

      <div id="gollum-editor-format-selector"> 
        <input type="hidden" id="format" name="format" value={{format}}>
        <details class="details-reset details-overlay">
          <summary class="btn btn-sm btn-block" aria-haspopup="true">
            {{#octicon}}pencil{{/octicon}}
            <span class="mr-1">{{format}}</span>
            <div class="dropdown-caret"></div>
          </summary>
          <div id="wiki_format" class="SelectMenu BasicSelect">
            <div class="SelectMenu-modal">
              <header class="SelectMenu-header">
                <h3 class="SelectMenu-title text-left">{{tt.editor.function_bar.wiki_format}}</h3>
              </header>
              <div class="SelectMenu-list">
                {{#formats}}
                {{#enabled}}
                <button class="SelectMenu-item" value="{{id}}" data-ext="{{ext}}" role="menuitemcheckbox" {{#selected}}aria-checked="true"{{/selected}}>
                  <!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
                  {{#octicon}}check 16 16 SelectMenu-icon SelectMenu-icon--check{{/octicon}}
                  {{name}}
                </button>
                {{/enabled}}
                {{/formats}}
                <div class="SelectMenu-divider text-left">{{tt.editor.function_bar.rendering_unavailable_for}}</div>
                {{#formats}}
                {{^enabled}}
                <button class="SelectMenu-item" value="{{id}}" data-ext="{{ext}}" role="menuitemcheckbox" {{#selected}}aria-checked="true"{{/selected}} disabled>
                  <!-- <%= octicon "check", class: "SelectMenu-icon SelectMenu-icon--check" %> -->
                  {{#octicon}}check 16 16 SelectMenu-icon SelectMenu-icon--check{{/octicon}}
                  {{name}}
                {{/enabled}}
                {{/formats}}
              </div>
            </div>
          </div>
        </details>
      </div>
    </div>    
    
  </div>

  <div id="gollum-editor-help" class="jaws border rounded-2 overflow-hidden mb-2">
    <nav id="gollum-editor-help-parent" class="menu rounded-0 float-left border-top-0 border-bottom-0 border-left-0">
      <a href="javascript:void(0);" class="selected menu-item border-bottom">Help 1</a>
      <a href="javascript:void(0);" class="menu-item border-bottom">Help 1</a>
      <a href="javascript:void(0);" class="menu-item border-bottom">Help 1</a>
    </nav>
    <nav id="gollum-editor-help-list" class="menu rounded-0 float-left border-top-0 border-bottom-0 border-left-0">
      <a href="javascript:void(0);" class="menu-item border-bottom">Help 2</a>
      <a href="javascript:void(0);" class="menu-item border-bottom">Help 3</a>
      <a href="javascript:void(0);" class="menu-item border-bottom">Help 4</a>
      <a href="javascript:void(0);" class="menu-item border-bottom">Help 5</a>
      <a href="javascript:void(0);" class="menu-item border-bottom">Help 6</a>
      <a href="javascript:void(0);" class="menu-item border-bottom">Help 7</a>
      <a href="javascript:void(0);" class="menu-item border-bottom">Help 8</a>
    </nav>
    <div id="gollum-editor-help-wrapper">
      <div id="gollum-editor-help-content" class="f4">
      <p>
      </p>
      </div>
    </div>
  </div>
  <div id="gollum-autorecover-msg" class="flash my-2" hidden>
      {{tt.editor.restore_button.prompt}}
      <button id="gollum-autorecover-button" class="btn btn-sm primary flash-action">{{tt.editor.restore_button.value}}</button>
  </div>
    <textarea id="gollum-editor-body" class="form-control text-mono"
     data-markup-lang="{{format}}" name="content" class="mousetrap">{{content}}</textarea>
    <div id="uploading">
      <p><div class="dotted-spinner"></div> Uploading file...</p>
    </div>

    {{#header}}

    <div id="gollum-editor-edit-header" class="collapsed border-bottom pt-2">
			<button class="btn btn-sm collapsable mb-2">{{#octicon}}triangle-down{{/octicon}}</button><button class="btn btn-sm collapsable mb-2" hidden>{{#octicon}}triangle-up{{/octicon}}</button>
      <h4 class="d-inline-block pl-2 f3">Header</h4>
      <textarea id="gollum-editor-header" name="header" class="form-control input-block mb-2 text-mono overflow-auto">{{header}}</textarea>
    </div>
    {{/header}}

    {{#footer}}
    <div id="gollum-editor-edit-footer" class="collapsed border-bottom pt-2">
      <button class="btn btn-sm collapsable mb-2">{{#octicon}}triangle-down{{/octicon}}</button><button class="btn btn-sm collapsable mb-2" hidden>{{#octicon}}triangle-up{{/octicon}}</button>
      <h4 class="d-inline-block pl-2 f3">Footer</h4>
      <textarea id="gollum-editor-footer" name="footer" class="form-control input-block mb-2 text-mono overflow-auto">{{footer}}</textarea>
    </div>
    {{/footer}}

    {{#sidebar}}
    <div id="gollum-editor-edit-sidebar" class="collapsed border-bottom pt-2">
      <button class="btn btn-sm collapsable mb-2">{{#octicon}}triangle-down{{/octicon}}</button><button class="btn btn-sm collapsable mb-2" hidden>{{#octicon}}triangle-up{{/octicon}}</button>
			<h4 class="d-inline-block pl-2 f3">Sidebar</h4>
      
      <textarea id="gollum-editor-sidebar" name="sidebar" class="form-control input-block mb-2 text-mono overflow-auto">{{sidebar}}</textarea>
    </div>
    {{/sidebar}}

    <div id="gollum-editor-edit-summary" class="my-2">
      <label for="message" class="jaws">Edit message:</label>
      {{#is_create_page}}
      <input type="text" name="message" class="form-control input-lg input-block f5 color-fg-subtle" id="gollum-editor-message-field" value="Created {{page_name}} ({{format}})">
      {{/is_create_page}}
      {{#is_edit_page}}
      <input type="text" name="message" class="form-control input-lg input-block f5 color-fg-subtle" id="gollum-editor-message-field" value="Updated {{page_name}} ({{format}})">
      {{/is_edit_page}}
    </div>

    <span class="jaws"><br></span>
		<div class="form-actions">
    	<input type="submit" id="gollum-editor-submit" class="btn btn-primary" value="{{tt.editor.save_button.value}}" title="{{tt.editor.save_button.title}}">
    	<a id="gollum-editor-cancel" class="btn" type="button" title="{{tt.editor.cancel_button.title}}" onClick="if(confirm('{{tt.editor.cancel_button.confirm}}')) { window.history.back()}">{{tt.editor.cancel_button.value}}</a>
		</div>
  </fieldset>
</form>
</div>
<div id="gollum-saved-msg" class="position-fixed bottom-0 left-0"></div>
